<template>
  <div
    v-if="modelValue"
    aria-live="polite"
    class="loading-overlay"
    :class="overlayClasses"
    role="status"
  >
    <div class="loading-content">
      <v-progress-circular color="primary" indeterminate :size="size" :width="width" />
      <div v-if="url" class="loading-info">
        <div class="loading-text">{{ t('loading.page') }}</div>
        <div class="loading-url loading-content" :title="url">{{ url }}</div>
      </div>
      <div v-else class="loading-text">{{ t('loading.page') }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

interface Props {
  /** 是否显示 loading */
  modelValue?: boolean
  /** 正在加载的 URL */
  url?: string
  /** 进度圈大小 */
  size?: number
  /** 进度圈宽度 */
  width?: number
  /** 背景色类型 */
  bgType?: 'dark' | 'light' | 'surface'
  /** 是否绝对定位 */
  absolute?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  url: '',
  size: 40,
  width: 4,
  bgType: 'surface',
  absolute: true
})

const overlayClasses = computed(() => {
  const classes = []

  if (props.absolute) {
    classes.push('loading-overlay--absolute')
  }

  classes.push(`loading-overlay--${props.bgType}`)

  return classes
})
</script>

<style scoped>
.loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: auto;
}

.loading-overlay--absolute {
  position: absolute;
  inset: 0;
}

.loading-overlay--dark {
  background-color: rgba(0, 0, 0, 0.08);
}

.loading-overlay--light {
  background-color: rgba(255, 255, 255, 0.8);
}

.loading-overlay--surface {
  background-color: rgba(var(--v-theme-surface), 0.5);
}

.loading-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.loading-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 500px;
}

.loading-text {
  color: rgba(var(--v-theme-on-surface), 0.87);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.loading-url {
  color: rgba(var(--v-theme-on-surface), 0.6);
  font-size: 12px;
  max-width: 90%;
  padding: 4px 12px;
  background-color: rgba(var(--v-theme-on-surface), 0.05);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.loading-url:hover {
  background-color: rgba(var(--v-theme-on-surface), 0.08);
  color: rgba(var(--v-theme-on-surface), 0.75);
}
</style>

<i18n>
{
  "zhHans": {
    "loading": {
      "page": "页面加载中…"
    }
  },
  "en": {
    "loading": {
      "page": "Loading page…"
    }
  }
}
</i18n>
